<template>
  <button @click="toggleVisibility">切换显示</button>
  <div 
    class="box" 
    :style="{ opacity: isVisible ? 1 : 0, visibility: isVisible ? 'visible' : 'hidden' }"
  >
    Hello Vue3!
  </div>
</template>

<script setup>
import { ref } from 'vue';
const isVisible = ref(true);

const toggleVisibility = () => {
  isVisible.value = !isVisible.value;
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 50px;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  line-height: 50px;
  transition: opacity 3s ease; /* 淡入淡出过渡效果 */
}
</style>
